<template>
  <div>
    <el-form ref="addForm" :model="addForm" :rules="addFormRules" size="small" label-width="80px">
      <el-form-item label="门店：" prop="shopId">
        <el-select v-model="addForm.shopId" @change="getTeam" filterable placeholder="请选择">
          <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="团队：" prop="teamId">
        <el-select v-model="addForm.teamId" @change="getEmployees" filterable placeholder="请选择">
          <el-option v-for="item in teamList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="员工：" prop="employeeId">
        <el-select v-model="addForm.employeeId" filterable placeholder="请选择">
          <el-option v-for="item in employeeList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="aloading" @click="saveInfo()">保存</el-button>
        <el-button type="default" @click="closeDialog()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  shopList,
  allTeamList,
  getEmployee,
  CUSTOMERDISTRIBUTE,
} from "@/api/customer";
import { deepClone, showToast } from "@/utils/util";
export default {
  name: "AllotStaff",
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      addForm: {},
      shopList: [],
      teamList: [],
      employeeList: [],
      addFormRules: {
        shopId: [{ required: true, message: "请选择门店", trigger: "change" }],
        teamId: [{ required: true, message: "请选择团队", trigger: "change" }],
        employeeId: [
          { required: true, message: "请选择员工", trigger: "change" },
        ],
      },
      aloading: false,
    };
  },
  mounted() {
    this.getShop();
  },
  methods: {
    // 获取门店列表
    getShop() {
      let oParams = {type:2}
      shopList(oParams).then((res) => {
        this.shopList = res.data;
      });
    },

    //根据门店获取团队
    getTeam(id) {
      if (this.addForm.teamId) {
        delete this.addForm.teamId;
      }
      allTeamList({ shopId: id,type:2 }).then((res) => {
        this.teamList = res.data;
      });
    },

    // 获取员工
    getEmployees(id) {
      let o = this.addForm;
      getEmployee({ shopId: o.shopId, teamId: id,type:2 }).then((res) => {
        this.employeeList = res.data || [];
      });
    },

    // 分配客户
    saveInfo() {
      let _this = this;
      _this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = deepClone(_this.addForm);
        let arr = [];
        _this.list.map((k) => {
          arr.push(k.customerId);
        });
        oParams.customerIds = arr;
        _this.aloading = true;
        CUSTOMERDISTRIBUTE(oParams).then((res) => {
          _this.aloading = false;
          if (res.code == 200) {
            showToast({
              message: "分配成功",
              type: "success",
            });
            this.$emit("change",true);
          }
        });
      });
    },

    // 关闭弹框
    closeDialog() {
      this.$emit("change");
    },
  },
};
</script>
<style lang="scss" scoped>
</style>